<template>
    <div class="login-header">
        <div class="login-header__close" @click="onClose">
            <img :src="`${_oss_}images/mobile/login/close.png`" />
        </div>
        <div class="login-header__title">{{ pageStore.pageName }}</div>
    </div>
</template>
<script setup>
const pageStore = usePageStore();
const router = useRouter();
const onClose = () => {
    router.back();
};
</script>
<style lang="scss" scoped>
.login-header {
    position: relative;
    height: 44px;
    background-color: #fff;
    font-size: 16px;
    color: #111;
    padding: 0 15px;
    display: flex;
    align-items: center;

    &__title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &__close {
        img {
            width: 15px;
            height: 15px;
        }
    }

    @media screen and (orientation: landscape) {
        height: 24px;
        font-size: 10px;

        &__close {
            img {
                width: 8px;
                height: 8px;
            }
        }
    }
}
</style>
